<style>
  @import '../../assets/style/good.css';
</style>

<template>
  <div>
    <div class="seed_top_banner">
      <div class="seed_back_arrow" @click="back">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zuo"></use>
        </svg>
      </div>
      <div class="seed_page_title">
        <span v-if="id > 0">商品编辑</span>
        <span v-else>发布商品</span>
      </div>
      <div class="seed_page_tool"></div>
    </div>
    <div class="seed_good_my_second">
      <div class="seed_good_operate_list">
        <input type="text" class="seed_good_operate_input" v-model="info.goods_name" placeholder="请输入产品名称"/>
      </div>
      <div class="seed_good_operate_list" >
        <span>商品分类</span>
        <div class="seed_good_operate_select" @click="goods_cate()">
          <p>{{cate_name[0]}}  {{cate_name[1]}}  {{cate_name[2]}}</p>
          <img class="seed_send_cente_c_img" src="@/assets/images/jt.png">
        </div>
      </div>
      <div class="seed_good_operate_list" >
        <span>商品分组</span>
        <div class="seed_good_operate_select" @click="goods_group()">
          <p>{{goods_group_name}}</p>
          <img class="seed_send_cente_c_img" src="@/assets/images/jt.png">
        </div>
      </div>
      <div class="seed_good_operate_list seed_good_operate_no_border">
        <textarea class="seed_good_operate_textarea" v-model="info.goods_brief" placeholder="请输入商品简介"></textarea>
      </div>
      <div class="seed_good_operate_list seed_good_operate_no_border">
        <div class="seed_good_img_box" style="margin-bottom: 1rem">
          <div class="seed_good_img">
            <input ref="file"
               type="file"
               class="good-file-input"
               accept="image/*"
               @change="(value) => change_main_img(value)"
            />
            <img :src="info.goods_img_url"/>
          </div>
          <div class="seed_good_img_text">
            <p>商品主图<br/>立即上传</p>
          </div>
        </div>
      </div>
      <div class="seed_member_edit_line"></div>
      <div class="seed_good_operate_list seed_good_operate_no_border">
        <span style="font-size: 1.5rem">商品规格</span>
        <div class="" style="float: right; width: 70%">
          <p style="text-align: right; margin-top: 3px">
            <input type="radio" class="seed_radio" value="0" v-model="info.is_multi_spec" @change="check_spec(0)" checked/> 统一规格&emsp;
            <input type="radio" class="seed_radio" value="1" v-model="info.is_multi_spec" @change="check_spec(1)"/> 多规格
          </p>
        </div>
      </div>
      <div class="seed_good_operate_list seed_good_operate_no_border" v-show="info.is_multi_spec == 0">
        <div class="seed_good_operate_half">
          <span>价格:&emsp;</span>
          <input placeholder="请输入商品价格" class="seed_good_operate_half_input" v-model="info.one_goods_price"/>
        </div>
        <div class="seed_good_operate_half">
          <span>库存:&emsp;</span>
          <input placeholder="请输入商品库存" class="seed_good_operate_half_input" v-model="info.one_goods_number"/>
        </div>
      </div>
      <div class="seed_good_operate_list seed_good_operate_no_border" v-show="info.is_multi_spec == 1" style="display: block; text-align: left">
        <div class="seed_good_add_spec_div">
          <button class="seed_good_add_spec" @click="addSpec()">添加规格</button>
        </div>
        <div class="seed_good_spec_box">
          <!--规格列表-->
          <div class="seed_good_spec_list" v-for="(spec, index) in spec_list" v-bind:key="spec.spec_id">
            <div class="seed_good_spec_name">{{spec.spec_name}}:</div>
            <!--规格值列表-->
            <div class="seed_good_spec_value_list">
              <div class="seed_good_spec_value" v-for="(spec_v, index_v) in spec.spec_values" v-bind:key="index_v">
                <div class="seed_good_spec_value_name" v-bind:class="spec_v.spec_class" @click="select_spec(index, index_v)">
                  <span>{{spec_v.spec_value}}</span>
                  <div class="seed_good_spec_value_checked" v-if="spec_v.spec_class !== ''"></div>
                </div>
                <div class="seed_good_spec_value_del" @click="spec_value_del(index, index_v)">×</div>
              </div>
              <!--添加规格值-->
              <div class="seed_good_spec_value_add" @click="addSpecValue(index)">添加</div>
            </div>
          </div>
          <div class="spec_good_form">
            <table class="spec_good_form_table" v-show="selectedArr.length > 0">
              <thead>
              <tr>
                <th v-for="(s_spec) in selectedArr" v-bind:key="s_spec.spec_id">{{s_spec.spec_name}}</th>
                <th>图片</th>
                <th>价格</th>
                <th>库存</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(s_value, index_t) in table_list" v-bind:key="index_t">
                <td v-for="(s_value_arr, index) in s_value.spec_value" v-bind:key="index">{{s_value_arr}}</td>
                <td style="position: relative">
                  <input ref="file"
                         type="file"
                         class="good-dimg-file-input"
                         accept="image/*"
                         @change="(value) => change_goods_list_img(value, index_t)"
                  />
                  <img :src="s_value.goods_img"/>
                </td>
                <td>
                  <input v-model="s_value.goods_price"/>
                </td>
                <td>
                  <input v-model="s_value.goods_storage"/>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="seed_good_operate_list seed_good_operate_no_border">
        <span class="seed_good_operate_tip" style="padding-bottom: 1rem">注:&emsp;价格必须是0.01~9999999之间的数字，且不能高于市场价。 此价格为商品实际销售价格，如果商品存在规格，该价格显示最低价格。</span>
      </div>
      <div class="seed_member_edit_line"></div>
      <div class="seed_good_operate_list seed_good_operate_no_border">
        <span style="font-size: 1.5rem">运费设置</span>
        <div class="" style="float: right; width: 70%">
          <p style="text-align: right; margin-top: 3px">
            <input type="radio" class="seed_radio" value="0" v-model="info.shipping_type" @change="check_s_type(0)" checked/> 统一运费
            <input type="radio" class="seed_radio" value="1" v-model="info.shipping_type" @change="check_s_type(1)"/> 运费模板
          </p>
        </div>
      </div>
      <div class="seed_good_operate_list seed_good_operate_no_border" v-show="info.shipping_type == 0">
        <div class="seed_good_operate_half">
          <span>运费:&emsp;</span>
          <input placeholder="请输入运费" class="seed_good_operate_half_input" v-model="info.shipping_value_0"/>
        </div>
        <div class="seed_good_operate_half">
          <span style="box-sizing: border-box; height: 3rem; line-height: 3rem">0代表免运费</span>
        </div>
      </div>
      <div class="seed_good_operate_list seed_good_operate_no_border" v-show="info.shipping_type == 1">
        <div class="seed_good_operate_all">
          <span>运费模板:&emsp;</span>
          <input placeholder="请选择运费模板" v-model="temp_name" class="seed_good_operate_all_input" @click="choose_exp_temp()"/>
        </div>
      </div>
      <div class="seed_good_operate_list seed_good_operate_no_border" v-show="info.shipping_type == 1">
        <div class="seed_good_operate_all">
          <span>商品重量:&emsp;</span>
          <input placeholder="请输入商品重量" class="seed_good_operate_all_input" v-model="info.goods_weight"/>
        </div>
      </div>
      <div class="seed_good_operate_list seed_good_operate_no_border" v-show="info.shipping_type == 1">
        <div class="seed_good_operate_all">
          <span>商品体积:&emsp;</span>
          <input placeholder="请输入商品体积" class="seed_good_operate_all_input" v-model="info.goods_vol"/>
        </div>
      </div>
      <div class="seed_member_edit_line"></div>
      <div class="seed_good_operate_list seed_good_operate_no_border">
        <span style="font-size: 1.5rem">设为推荐商品</span>
      </div>
      <div class="seed_good_operate_list" style="min-height: auto !important; padding-bottom: 1.3rem">
        <p style="text-align: right; margin-top: 3px">
          <input type="radio" class="seed_radio" value="0" v-model="info.is_best" @change="check_rec" checked/> 否
          <input type="radio" class="seed_radio" style="margin-left: 2rem" value="1" v-model="info.is_best" @change="check_rec"/> 是
        </p>
      </div>
      <div class="seed_good_operate_list seed_good_operate_no_border">
        <span style="font-size: 1.5rem">商品状态</span>
      </div>
      <div class="seed_good_operate_list" style="min-height: auto !important; padding-bottom: 1.3rem">
        <p style="text-align: right; margin-top: 3px">
          <input type="radio" class="seed_radio" value="1" v-model="info.is_on_sale" @change="check_rec" checked/> 上线
          <input type="radio" style="margin-left: 2rem" class="seed_radio" value="-1" v-model="info.is_on_sale" @change="check_rec"/> 下线
        </p>
      </div>
      <!--限购-->
      <div class="seed_good_operate_list seed_good_operate_no_border">
        <span style="font-size: 1.5rem">每人限购</span>
      </div>
      <div class="seed_good_operate_list seed_good_operate_no_border" style="min-height: auto !important;">
        <input placeholder="请输入限购数量" class="seed_good_operate_full_input" v-model="info.buy_limit"/>
      </div>
      <div class="seed_good_operate_list" style="min-height: 3rem !important;">
        <span class="seed_good_operate_tip">注:&emsp;填写0代表不限购。</span>
      </div>
      <!--市场价-->
      <div class="seed_good_operate_list seed_good_operate_no_border">
        <span style="font-size: 1.5rem">市场价</span>
      </div>
      <div class="seed_good_operate_list seed_good_operate_no_border" style="min-height: auto !important;">
        <input placeholder="请输入市场价" class="seed_good_operate_full_input" v-model="info.market_price"/>
      </div>
      <div class="seed_good_operate_list" style="min-height: 4rem !important;">
        <span class="seed_good_operate_tip">注:&emsp;价格必须是0.01~9999999之间的数字，此价格仅为市场参考售价，请根据该实际情况认真填写。</span>
      </div>
      <!--库存预警-->
      <div class="seed_good_operate_list seed_good_operate_no_border">
        <span style="font-size: 1.5rem">库存预警</span>
      </div>
      <div class="seed_good_operate_list seed_good_operate_no_border" style="min-height: auto !important;">
        <input placeholder="请输入库存预警数量" class="seed_good_operate_full_input" v-model="info.warn_number"/>
      </div>
      <div class="seed_good_operate_list seed_good_operate_no_border" style="min-height: 3rem !important;">
        <span class="seed_good_operate_tip">注:&emsp;填写大于0的数。</span>
      </div>
      <div class="seed_member_edit_line"></div>
      <!--商品轮播图-->
      <div class="seed_good_operate_list seed_good_operate_no_border">
        <span style="font-size: 1.5rem">商品轮播图</span>
      </div>
      <div class="seed_good_operate_list">
        <div class="seed_good_img_box_c" style="margin: 0 1rem 1rem 0">
          <div class="seed_good_img_c" v-for="(gc, index_gc) in info.goods_gallery" v-bind:key="index_gc">
            <input v-if="gc.file === ''" ref="c_file"
               type="file"
               class="good-file-input"
               accept="image/*"
               @change="(value) => change_gallery_img(value, index_gc)"
            />
            <img :src="gc.src"/>
            <div class="seed_good_del" @click="gallery_del(index_gc)" v-show="gc.file !== ''">×</div>
          </div>
        </div>
      </div>
      <!-- 商品详情 -->
      <div class="seed_good_operate_list seed_good_operate_no_border">
        <span style="font-size: 1.5rem">商品详情</span>
      </div>
      <div class="seed_good_operate_list seed_good_operate_no_border" style="min-height: auto !important;">
        <vue-html5-editor :content="info.goods_desc" :height="500" @change="updateContentData" ref="content"></vue-html5-editor>
      </div>
      <!-- 发布 -->
      <div class="goods_publish_btn_pad"></div>
      <div class="goods_publish_btn" @click="publish_goods()">
        <span style="font-size: 1.5rem;">发布商品</span>
      </div>
    </div>
    <!-- 运费模板 -->
    <mt-popup style="width: 100%" position="bottom" class="mint-popup" v-model="temp_visible">
      <mt-picker :slots="temp_slots"
         ref="picker1"
         :show-toolbar="true"
         value-key="name">
        <span @click="handleCancel" class="seed_cancel">取消</span>
        <span @click="handleConfirm(1)" class="seed_sure">确认</span>
      </mt-picker>
    </mt-popup>
    <!-- 商品分组 -->
    <mt-popup style="width: 100%" position="bottom" class="mint-popup" v-model="group_visible">
      <mt-picker :slots="group_slots"
         ref="picker2"
         :show-toolbar="true"
         value-key="name">
        <span @click="handleCancel" class="seed_cancel">取消</span>
        <span @click="handleConfirm(2)" class="seed_sure">确认</span>
      </mt-picker>
    </mt-popup>
    <!-- 商品分类 -->
    <mt-popup style="width: 100%" v-model="cate_visible" position="bottom" class="mint-popup">
      <mt-picker ref="picker3" :slots="cate1_slots" :show-toolbar="true" valueKey="name" @change="cateChange1" :itemHeight="40" style="float: left" v-bind:style="width_percent">
        <span @click="handleCancel" class="seed_cancel">取消</span>
      </mt-picker>
      <mt-picker v-show="col > 1" ref="picker4" :slots="cate2_slots" :show-toolbar="true" valueKey="name" @change="cateChange2" :itemHeight="40" style="float: left" v-bind:style="width_percent"></mt-picker>
      <mt-picker v-show="col > 2" ref="picker5" :slots="cate3_slots" :show-toolbar="true" valueKey="name" @change="cateChange3" :itemHeight="40" style="float: left" v-bind:style="width_percent">
        <span @click="handleConfirm(3)" class="seed_sure">确认</span>
      </mt-picker>
    </mt-popup>
    <!--添加规格-->
    <mt-popup v-model="specVisible" position="top" :modal=true style="margin-top: 20rem; width: 80%;">
      <div class="seed_good_modal">
        <div class="seed_modal_title">添加规格</div>
        <div class="seed_modal_content">
          <input v-model="new_spec" placeholder="请输入规格名称" class="seed_modal_input"/>
          <input v-model="new_spec_value" placeholder="请输入规格值" class="seed_modal_input"/>
        </div>
        <div class="seed_modal_foot">
          <button class="seed_modal_cancel" @click="spec_add_cancel()">取消</button>
          <button class="seed_modal_confirm" @click="spec_add_confirm_1()">确认</button>
        </div>
      </div>
    </mt-popup>
    <!--添加规格值-->
    <mt-popup v-model="specValueVisible" position="top" :modal=true style="margin-top: 20rem; width: 80%;">
      <div class="seed_good_modal">
        <div class="seed_modal_title">添加规格值</div>
        <div class="seed_modal_content">
          <input v-model="new_spec_value" placeholder="请输入规格值" class="seed_modal_input"/>
        </div>
        <div class="seed_modal_foot">
          <button class="seed_modal_cancel" @click="spec_add_cancel()">取消</button>
          <button class="seed_modal_confirm" @click="spec_add_confirm()">确认</button>
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<script>
const MAX_SIZE = 2 * 1024 * 1024
export default {
  data () {
    return {
      id: 0,
      spec_list: [],
      cate_list: [], // 分类列表
      specValueVisible: false, // 添加规格值
      specVisible: false, // 添加规格
      cate_visible: false,
      cateId: 0, // 选中的分类id
      cate_id1: 0,
      cate_id2: 0,
      cate_id3: 0,
      cate_name: [],
      col: 1,
      width_percent: 'width: 100%',
      cate1_slots: [
        {values: []}
      ],
      cate2_slots: [
        {values: []}
      ],
      cate3_slots: [
        {values: []}
      ],
      temp_visible: false, // 运费模板
      temp_name: '',
      temp_slots: [
        {values: []}
      ],
      group_visible: false, // 分组列表
      group_slots: [
        {values: []}
      ],
      info: [],
      goods_group_name: '', // 分类名称
      goods_cate_name: '', // 商品分类名称
      new_spec_value: '', // 新增规格
      new_spec_index: 0, // 新增规格值对应规格index
      new_spec: '', // 新规格名称
      table_list: [], // 商品规格表格
      selectedArr: []
    }
  },
  created () {
    let id = this.$route.params.id
    if (id !== undefined && id > 0) {
      this.id = this.$route.params.id
    }
    this.getGoodsInfo()
    this.getAllCateList()
  },
  methods: {
    back: function () {
      if (this.id > 0) {
        this.$router.push({name: 'good-list'})
      } else {
        this.$router.push({name: 'Home'})
      }
    },
    getGoodsInfo: function () {
      let id = this.id
      let that = this
      let param = {goods_common_id: id}
      this.$request.GoodOperate(param).then(data => {
        this.info = data.info
        this.info.goods_img_url = require('../../assets/images/photo.png')
        this.info.goods_gallery = [{src: require('../../assets/images/photo.png'), file: ''}]
        this.info.goods_desc = ''
        this.info.buy_limit = 0
        this.info.market_price = 0
        this.info.warn_number = 100
        this.info.goods_weight = 0
        this.info.goods_vol = 0
        this.info.one_goods_price = 0
        this.info.one_goods_number = 0
        this.info.goods_images = {}
        let groupList = data.group_list
        let temList = data.temp
        groupList.forEach(function (item) {
          let tmp = {name: item.group_name, value: item.group_id}
          that.group_slots[0].values.push(tmp)
        })
        temList.forEach(function (item) {
          let tmp = {name: item.t_name, value: item.temp_id}
          that.temp_slots[0].values.push(tmp)
        })
      })
    },
    getAllCateList: function () {
      let that = this
      this.$request.getAllCateList().then(res => {
        this.col = res.col
        this.width_percent = 'width: ' + 100 / res.col + '%'
        this.cate_list = res.data
        this.cate_id1 = that.getCateList(1)
        this.cate_id2 = that.getCateList(2)
        that.getCateList(3)
        this.getSpecByCateId()
      })
    },
    // 选择运费模板
    choose_exp_temp: function () {
      this.temp_visible = true
    },
    // 选择商品分组
    goods_group: function () {
      this.group_visible = true
    },
    goods_cate () {
      this.cate_visible = true
    },
    // 获取分类
    getCateList: function (type) {
      let list = this.cate_list
      let that = this
      let arr = []
      let pid1 = this.cate_id1
      let pid2 = this.cate_id2
      let initId = 0
      switch (type) {
        case 1:
          for (let i = 0; i < Object.keys(list).length; i++) {
            let tmp = {name: list[Object.keys(list)[i]].cat_name, value: list[Object.keys(list)[i]].cat_id}
            if (i === 0) {
              initId = list[Object.keys(list)[i]].cat_id
            }
            arr.push(tmp)
          }
          that.cate1_slots[0].values = arr
          return initId
        case 2:
          let childrenList1 = list[pid1].child
          if (childrenList1 === undefined) {
            that.cate_name[1] = ''
            that.cate2_slots[0].values = arr
            return false
          }
          for (let i = 0; i < Object.keys(childrenList1).length; i++) {
            let tmp = {name: childrenList1[Object.keys(childrenList1)[i]].cat_name, value: childrenList1[Object.keys(childrenList1)[i]].cat_id}
            if (i === 0) {
              initId = childrenList1[Object.keys(childrenList1)[i]].cat_id
            }
            arr.push(tmp)
          }
          that.cate2_slots[0].values = arr
          return initId
        case 3:
          let childrenList2 = list[pid1].child[pid2].child
          if (childrenList2 === undefined) {
            that.cate_name[2] = ''
            that.cate3_slots[0].values = arr
            return false
          }
          for (let i = 0; i < Object.keys(childrenList2).length; i++) {
            let tmp = {name: childrenList2[Object.keys(childrenList2)[i]].cat_name, value: childrenList2[Object.keys(childrenList2)[i]].cat_id}
            arr.push(tmp)
          }
          that.cate3_slots[0].values = arr
          return true
      }
      return false
    },
    // 改变分类
    cateChange1: function (picker, value) {
      let pid1 = this.cate_id1
      if (value[0] === undefined) {
        this.cate_id1 = 0
        return false
      }
      let newPid1 = value[0].value
      this.cate_name[0] = value[0].name
      if (pid1 !== newPid1) {
        this.cate_id1 = newPid1
        this.getCateList(2)
        this.getSpecByCateId()
      }
    },
    cateChange2: function (picker, value) {
      let pid2 = this.cate_id2
      if (value[0] === undefined) {
        this.cate_id2 = 0
        this.getSpecByCateId()
        return false
      }
      let newPid2 = value[0].value
      this.cate_name[1] = value[0].name
      if (pid2 !== newPid2) {
        this.cate_id2 = newPid2
        this.getCateList(3)
        this.getSpecByCateId()
      }
    },
    cateChange3: function (picker, value) {
      if (value[0] === undefined) {
        this.cate_id3 = 0
        this.getSpecByCateId()
        return false
      }
      this.cate_id3 = value[0].value
      this.cate_name[2] = value[0].name
      this.getSpecByCateId()
    },
    handleConfirm (type) {
      switch (type) {
        case 1:
          this.info['shipping_value_1'] = this.$refs.picker1.getValues()[0].value
          this.temp_name = this.$refs.picker1.getValues()[0].name
          break
        case 2:
          this.info['group_id'] = this.$refs.picker2.getValues()[0].value
          this.goods_group_name = this.$refs.picker2.getValues()[0].name
          break
        case 3:
          this.info['cate_id'] = this.cateId
      }
      // this.express = this.$refs.picker.getValues()[0].name
      // this.wid = this.$refs.picker.getValues()[0].value
      this.temp_visible = false
      this.group_visible = false
      this.cate_visible = false
    },
    handleCancel () {
      this.temp_visible = false
      this.group_visible = false
      this.cate_visible = false
    },
    check_spec: function (type) {
      this.info.is_multi_spec = type
    },
    check_fee: function () {

    },
    check_s_type: function (type) {
      this.info.shipping_type = type
    },
    check_rec: function () {

    },
    getSpecByCateId: function () {
      let cateId = this.checkCateId()
      let that = this
      if (!cateId) {
        return false
      }
      this.$request.getSpecByCateId(cateId).then(data => {
        that.spec_list = data
      })
    },
    /**
     * 分类id
     * @returns {number}
     */
    checkCateId: function () {
      let cateId1 = this.cate_id1
      let cateId2 = this.cate_id2
      let cateId3 = this.cate_id3
      let cateId = this.cateId
      let newCateId = cateId3 > 0 ? cateId3 : cateId2 > 0 ? cateId2 : cateId1
      if (cateId === newCateId) {
        return false
      }
      this.cateId = newCateId
      this.info['cate_id'] = this.cateId
      return newCateId
    },
    /**
     * 选择规格
     */
    select_spec: function (index, index_v) {
      let list = this.spec_list
      if (list[index]['spec_values'][index_v]['spec_class'] === '') {
        list[index]['spec_values'][index_v]['spec_class'] = 'seed_good_spec_value_active'
      } else {
        list[index]['spec_values'][index_v]['spec_class'] = ''
      }
      this.spec_list = list
      this.spec_goods_form()
    },
    /**
     * 删除规格值
     * @param index
     * @param index_v
     */
    spec_value_del: function (index, index_v) {
      let that = this
      let list = this.spec_list
      let specId = list[index]['spec_id']
      let specVal = list[index]['spec_values'][index_v]['spec_value']
      let param = {
        spec_id: specId,
        spec_value: specVal
      }
      this.$MessageBox.confirm('确定要删除该规格值吗?').then(action => {
        that.$request.specValueDel(param).then(data => {
          list[index]['spec_values'].splice(index_v, 1)
          that.spec_list = list
        })
      })
    },
    addSpecValue: function (index) {
      this.specValueVisible = true
      this.new_spec_index = index
    },
    spec_add_cancel: function () {
      this.specValueVisible = false
      this.specVisible = false
      this.new_spec_value = ''
    },
    /**
     * 新增规格值
     * @returns {boolean}
     */
    spec_add_confirm: function () {
      let newSpecValue = this.new_spec_value
      let specId = this.spec_list[this.new_spec_index]['spec_id']
      let that = this
      if (newSpecValue.replace(/\s+/g, '') === '') {
        alert('请输入规格值')
        return false
      }
      this.$MessageBox.confirm('确定要添加该规格值吗?').then(action => {
        that.$request.specValueAdd({spec_id: specId, spec_value: newSpecValue}).then(data => {
          let obj = {spec_value: newSpecValue, spec_class: ''}
          that.spec_list[that.new_spec_index]['spec_values'].push(obj)
          that.specValueVisible = false
          that.new_spec_value = ''
        })
      })
    },
    // 新增规格
    addSpec: function () {
      this.specVisible = true
    },
    /**
     * 新增规格 保存
     * @returns {boolean}
     */
    spec_add_confirm_1: function () {
      let newSpec = this.new_spec
      let newSpecValue = this.new_spec_value
      let catId = this.cateId
      let that = this
      if (parseInt(catId) <= 0) {
        alert('请选择商品分类')
        return false
      }
      if (newSpec.replace(/\s+/g, '') === '') {
        alert('请输入规格')
        return false
      }
      if (newSpecValue.replace(/\s+/g, '') === '') {
        alert('请输入规格值')
        return false
      }
      this.$MessageBox.confirm('确定要添加该规格吗?').then(action => {
        that.$request.specAdd({cat_id: catId, spec_value: newSpecValue, spec_name: newSpec}).then(data => {
          let obj = {
            spec_id: data,
            cat_id: catId,
            spec_name: newSpec,
            spec_values: [
              {
                spec_value: newSpecValue,
                spec_class: ''
              }
            ]
          }
          that.spec_list.push(obj)
          that.specVisible = false
          that.new_spec_value = ''
          that.new_spec = ''
        })
      })
    },
    /**
     * 商品规格表格
     */
    spec_goods_form: function () {
      let list = this.spec_list
      let selectedArr = []
      list.forEach(function (item) {
        let tmp = {
          spec_id: item.spec_id,
          spec_name: item.spec_name
        }
        let tmpValue = []
        item.spec_values.forEach(function (values) {
          if (values.spec_class !== '') {
            tmpValue.push({ spec_value: values.spec_value })
          }
        })
        tmp.spec_value = tmpValue
        if (tmpValue.length > 0) {
          selectedArr.push(tmp)
        }
      })
      if (selectedArr.length > 3) {
        this.$toast('选择规格类型不超过3个')
        return false
      }
      this.selectedArr = selectedArr
      this.table_list = this._deal_goods_spec_data(selectedArr)
      this.info.goods_spec_info = this.table_list
    },
    _deal_goods_spec_data: function (list) {
      let rsArr = []
      if (list.length === 0) {
        return rsArr
      }
      if (list[0]) {
        list[0]['spec_value'].forEach(function (item1) {
          if (list[1]) {
            list[1]['spec_value'].forEach(function (item2) {
              if (list[2]) {
                list[2]['spec_value'].forEach(function (item3) {
                  let tmp = {
                    spec_id: [list[0].spec_id, list[1].spec_id, list[2].spec_id],
                    spec_name: [list[0].spec_name, list[1].spec_name, list[2].spec_id],
                    spec_value: [item1.spec_value, item2.spec_value, item3.spec_value],
                    goods_price: 0,
                    goods_storage: 0,
                    goods_img: require('../../assets/images/photo.png'),
                    goods_image_file: ''
                  }
                  rsArr.push(tmp)
                })
              } else { // 无三级
                let tmp = {
                  spec_id: [list[0].spec_id, list[1].spec_id],
                  spec_name: [list[0].spec_name, list[1].spec_name],
                  spec_value: [item1.spec_value, item2.spec_value],
                  goods_price: 0,
                  goods_storage: 0,
                  goods_img: require('../../assets/images/photo.png'),
                  goods_image_file: ''
                }
                rsArr.push(tmp)
              }
            })
          } else { // 无二级数据
            let tmp = {
              spec_id: [list[0].spec_id],
              spec_name: [list[0].spec_name],
              spec_value: [item1.spec_value],
              goods_price: 0,
              goods_storage: 0,
              goods_img: require('../../assets/images/photo.png'),
              goods_image_file: ''
            }
            rsArr.push(tmp)
          }
        })
      }
      return rsArr
    },
    /**
     * 商品主图
     * @param e
     */
    change_main_img: function (e) {
      let file = e.target.files[0]
      if (window.FileReader && file) {
        if (file.size < MAX_SIZE) {
          // 读取文件转化图片base64
          let fr = new FileReader()
          fr.readAsDataURL(file)
          fr.onload = (e) => {
            this.info.goods_img = file
            this.info.goods_img_url = e.target.result
            // self.$refs.share_image.classList.remove('seed_image_hide')
          }
        } else {
          this.$MessageBox({
            title: '警告',
            message: `图片尺寸过大，图片请小于2M`
          })
        }
      }
    },
    change_gallery_img: function (e, index) {
      let file = e.target.files[0]
      let obj = {}
      if (window.FileReader && file) {
        if (file.size < MAX_SIZE) {
          obj = this.info.goods_gallery
          // 读取文件转化图片base64
          let fr = new FileReader()
          fr.readAsDataURL(file)
          fr.onload = (e) => {
            obj[index].file = file
            obj[index].src = e.target.result
            if (obj.length >= 5) {
              this.info.goods_gallery = obj
              this.$forceUpdate()
              return false
            }
            obj.push({src: require('../../assets/images/photo.png'), file: ''})
            this.info.goods_gallery = obj
            this.$forceUpdate()
          }
        } else {
          this.$MessageBox({
            title: '警告',
            message: `图片尺寸过大，图片请小于2M`
          })
        }
      }
    },
    gallery_del: function (index) {
      let count = 0
      this.info.goods_gallery.forEach(function (item) {
        if (item.file !== '') {
          count += 1
        }
      })
      this.info.goods_gallery.splice(index, 1)
      if (count === 5) {
        this.info.goods_gallery.push({src: require('../../assets/images/photo.png'), file: ''})
      }
      this.$forceUpdate()
    },
    change_goods_list_img: function (e, index) {
      let file = e.target.files[0]
      let obj = {}
      if (window.FileReader && file) {
        if (file.size < MAX_SIZE) {
          obj = this.table_list
          // 读取文件转化图片base64
          let fr = new FileReader()
          fr.readAsDataURL(file)
          fr.onload = (e) => {
            obj[index].goods_image_file = file
            obj[index].goods_img = e.target.result
            this.table_list = obj
            this.$forceUpdate()
          }
        } else {
          this.$MessageBox({
            title: '警告',
            message: `图片尺寸过大，图片请小于2M`
          })
        }
      }
    },
    updateContentData: function (data) {
      this.info.goods_desc = data
    },
    publish_goods: function () {
      let goodsGallery = []
      let goodsImage = []
      this.info.goods_gallery.forEach(function (item) {
        if (item.file !== '') {
          goodsGallery.push(item.file)
        }
      })
      this.table_list.forEach(function (itemT) {
        if (itemT.goods_image_file !== '') {
          goodsImage.push(itemT.goods_image_file)
          itemT.goods_image_file = 1
        }
      })

      let check = this.check_submit(this.info)
      if (check === false) {
        return false
      }
      this.$MessageBox.confirm('确定发布该商品?').then(action => {
        event.preventDefault()
        let formData = new FormData()
        formData.append('goods_name', this.info.goods_name)
        formData.append('cat_id', this.info.cate_id)
        formData.append('group_id', this.info.group_id)
        formData.append('goods_main_image', this.info.goods_img)
        goodsGallery.forEach(function (item1) {
          formData.append('goods_gallery[]', item1)
        })
        formData.append('is_on_sale', this.info.is_on_sale)
        formData.append('goods_spec_type', this.info.is_multi_spec)
        formData.append('sale_time', this.info.goods_name)
        formData.append('goods_desc', this.info.goods_desc)
        formData.append('market_price', this.info.market_price)
        formData.append('buy_limit', this.info.buy_limit)
        formData.append('warn_number', this.info.warn_number)
        formData.append('goods_brief', this.info.goods_brief)
        formData.append('is_best', this.info.is_best)
        formData.append('shipping_type', this.info.shipping_type)
        formData.append('shipping_value_0', this.info.shipping_value_0)
        formData.append('shipping_value_1', this.info.shipping_value_1)
        formData.append('goods_weight', this.info.goods_weight)
        formData.append('goods_vol', this.info.goods_vol)
        formData.append('one_goods_price', this.info.one_goods_price)
        formData.append('one_goods_number', this.info.one_goods_number)
        goodsImage.forEach(function (item2) {
          formData.append('goods_image[]', item2)
        })
        formData.append('goods_spec_info', JSON.stringify(this.info.goods_spec_info))
        formData.append('token', this.$utils.getCookie('token'))
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        let self = this
        this.$http.post(this.$config.website + '/mobile/shop.good.good/add_save', formData, config).then(function (res) {
          if (res.data.status === 200) {
            self.$toast('保存成功')
            self.$router.push({name: 'good-list'})
          } else {
            self.$toast(res.data.msg)
          }
        })
      })
    },
    check_submit: function (data) {
      let positiveInt = /^[1-9]*[1-9][0-9]*$/
      let notNegNumber = /^(0\.?\d{0,2}|[1-9]\d*\.?\d{0,2})$/
      let notNull = /^[\s\S]*.*[^\s][\s\S]*$/
      if (!data.goods_name || !notNull.test(data.goods_name)) {
        this.$toast('商品名称不能为空')
        return false
      }
      if (!positiveInt.test(data.cate_id)) {
        this.$toast('请选择商品分类')
        return false
      }
      if (!positiveInt.test(data.group_id)) {
        this.$toast('请选择商品分组')
        return false
      }
      if (!data.goods_brief || !notNull.test(data.goods_brief)) {
        this.$toast('商品简介不能为空')
        return false
      }
      if (!data.goods_img) {
        this.$toast('请选择商品主图')
        return false
      }
      if (data.is_multi_spec === 0) {
        if (!positiveInt.test(data.one_goods_price)) {
          this.$toast('请输入有效价格')
          return false
        }
        if (!positiveInt.test(data.one_goods_number)) {
          this.$toast('请输入有效库存')
          return false
        }
      }
      if (data.shipping_type === 0) {
        if (!notNegNumber.test(data.shipping_value_0)) {
          this.$toast('请输入有效运费')
          return false
        }
      } else {
        if (!positiveInt.test(data.shipping_value_1)) {
          this.$toast('请选择运费模板')
          return false
        }
      }
      if (!notNegNumber.test(data.buy_limit)) {
        this.$toast('请输入有效限购数量')
        return false
      }
      if (!positiveInt.test(data.market_price)) {
        this.$toast('请输入有效市场价格')
        return false
      }
      if (!positiveInt.test(data.warn_number)) {
        this.$toast('请输入有效预警数量')
        return false
      }
      if (!data.goods_gallery[0].file) {
        this.$toast('请选择商品轮播图')
        return false
      }
    }
  }
}
</script>
